<template>
  <div
    class='zuicoolLoading'
    :style="{
      position: inner ? 'absolute' : 'fixed',
      zIndex: inner ? '9' : '999'
    }"
  >
    <template v-if="!hideBounce">
      <span class='bounce1'/>

      <span class='bounce2'/>
    </template>

    <span
      class="progress"
      v-if="typeof progress !== 'undefined'"
    >
      {{progress}}%
    </span>

    <slot/>
  </div>
</template>

<script>
  export default {
    props: {
      inner: {
        type: Boolean,
      },
      hideBounce: {
        type: Boolean,
      },
      progress: {
        type: Number,
      },
    }
  }
</script>

<style lang='less' scoped>
  @red: #df4f43;
  .zuicoolLoading {
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-color: #fff;
  }

  @keyframes bounce {
    0%, 100% {
      transform: scale(0.0);
    }
    50% {
      transform: scale(1.0);
    }
  }

  .bounce1, .bounce2 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px;

    width: 60px;
    height: 60px;

    border-radius: 50%;
    background-color: @red;
    opacity: 0.6;

    animation: bounce 2.0s infinite ease-in-out;
  }

  .bounce2 {
    animation-delay: -1.0s;
  }

  .progress {
    position: absolute;
    top: 50%;
    left: 50%;

    margin-top: 40px;

    font-size: 1rem;

    color: @red;

    transform: translateX(-50%);
  }
</style>
